import Collaboration from '@tiptap/extension-collaboration';
import CollaborationCursor from '@tiptap/extension-collaboration-cursor';
import { EditorContent, useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { type FC } from 'react';

import * as Y from 'yjs';
import { HocuspocusProvider } from '@hocuspocus/provider';

const colors = [
	'#958DF1',
	'#F98181',
	'#FBBC88',
	'#FAF594',
	'#70CFF8',
	'#94FADB',
	'#B9F18D',
	'#C3E2C2',
	'#EAECCC',
	'#AFC8AD',
	'#EEC759',
	'#9BB8CD',
	'#FF90BC',
	'#FFC0D9',
	'#DC8686',
	'#7ED7C1',
	'#F3EEEA',
	'#89B9AD',
	'#D0BFFF',
	'#FFF8C9',
	'#CBFFA9',
	'#9BABB8',
	'#E3F4F4'
];

const names = [
	'Lea Thompson',
	'Cyndi Lauper',
	'Tom Cruise',
	'Madonna',
	'Jerry Hall',
	'Joan Collins',
	'Winona Ryder',
	'Christina Applegate',
	'Alyssa Milano',
	'Molly Ringwald',
	'Ally Sheedy',
	'Debbie Harry',
	'Olivia Newton-John',
	'Elton John',
	'Michael J. Fox',
	'Axl Rose',
	'Emilio Estevez',
	'Ralph Macchio',
	'Rob Lowe',
	'Jennifer Grey',
	'Mickey Rourke',
	'John Cusack',
	'Matthew Broderick',
	'Justine Bateman',
	'Lisa Bonet'
];

const getRandomElement = (list: any) =>
	list[Math.floor(Math.random() * list.length)];

const getRandomColor = () => getRandomElement(colors);
const getRandomName = () => getRandomElement(names);

const Editor: FC = () => {
	const ydoc = new Y.Doc();

	const provider = new HocuspocusProvider({
		url: 'ws://127.0.0.1:1234',
		name: 'example-document',
		document: ydoc
	});

	const editor = useEditor({
		extensions: [
			StarterKit.configure({
				history: false // 禁用默认的 history 扩展
			}),
			Collaboration.configure({
				document: ydoc
			}),
			CollaborationCursor.configure({
				provider,
				user: { name: getRandomName(), color: getRandomColor() }
			})
		]
	});

	if (!editor) {
		return null;
	}

	return (
		<div className="border">
			<EditorContent editor={editor} />
		</div>
	);
};

export default Editor;
